<template>
  <!--  表操作-->
  <div style="padding: 10px 0;margin-top: 10px">
    <el-input style="width: 200px;margin-right: 5px" v-model="formData.sname" placeholder="请输入姓名" clearable/>
    <el-input style="width: 200px;margin-right: 5px" v-model="formData.sid" placeholder="请输入学号" clearable/>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-button type="warning" @click="reset">重置</el-button>
  </div>

  <!--  学生表-->
  <el-table :data="tableData" border stripe header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="140">
    </el-table-column>
    <el-table-column prop="id" label="学号" width="200">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="download(scope.$index,scope.row)">下载实验报告<i class="el-icon-edit"></i></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref,} from 'vue'
import axios from "axios";
import {CourseStore, shiyanStore} from "@/store";

const formData = reactive({
  sname: '',
  sid: ''
})
// const current = ref(1)

// 学生信息表（传入课程id找到
const tableData = ref([]) as any
const Nform = ref([]) as any
const coursestore = CourseStore()
const load = async () => {
  axios.get('/course/getstudent/?cid=' + coursestore.course_id)
      .then(function (res) {
        tableData.value = res.data.data
        // console.log(tableData.value)
        for (var i = 0; i < tableData.value.length; i++) {
          Nform.value[i] = tableData.value[i].name
        }
        // console.log(tableData.value[0].name)
        // current.value = val
        // console.log(res)
      })
}

onMounted(async () => {
  await load()
})

class Student {
  name: string = ''
  id: string = ''
}

const systore = shiyanStore()
//下载实验报告（很多学生没有对应实验报告，为了测试功能写死了
const download = async (index: number, row: Student) => {
  axios({
    method: 'get',
    url: '/sexpeiment/download',
    params: {
      studentId: row.id,
      experimentId: systore.id
    }
  })
      .then(function (res) {
        console.log(res.data.data)
        let url = res.data.data
        if (url === undefined || url === null) {
          alert("当前学生未上传实验报告!")
        }else{
          const link = document.createElement('a') // 创建一个 a 标签用来模拟点击事件
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '实验报告')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        }

      })
}


// 输入
const sname = ref("")
const sid = ref("")
//搜索
const arr = ref([])
const search = (() => {
  // console.log(Nform.value)
  console.log(sname.value)
  if (sname.value != '') {  //输入不为空
    //需要单独提取出json文件的name/id属性
    // 使用过滤器，查看tabledata里的name属性是否包含输入的值
    //tableData.value为表格数据的值
    // console.log(arr.value)
    tableData.value = tableData.value.filter((item) => item.value.includes(sname.value))
    console.log(arr.value)
    load()
  }
})

//重置
const reset = () => {
  sname.value = ""
  sid.value = ""
  load()
}
</script>

<style>
.headerBg {
  background-color: #eee !important;
}
</style>
